<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  totalPages: {
    type: Number,
    default: 10
  }
});

const emit = defineEmits(['page-change']);

const changePage = (page) => {
  if (page >= 1 && page <= props.totalPages) {
    emit('page-change', page);
  }
};
</script>

<template>
  <div class="pagination-container">
    <button 
      class="pagination-btn pagination-prev" 
      @click="changePage(currentPage - 1)"
      :disabled="currentPage === 1"
    >
      Previous
    </button>
    
    <div class="pagination-numbers">
      <!-- 第一页始终显示 -->
      <span 
        class="pagination-number" 
        :class="{ 'active': currentPage === 1 }"
        @click="changePage(1)"
      >
        1
      </span>
      
      <!-- 省略号（如果需要） -->
      <span v-if="currentPage > 3" class="pagination-dots">...</span>
      
      <!-- 当前页前后的页码 -->
      <template v-for="page in totalPages" :key="page">
        <span 
          v-if="page !== 1 && page !== totalPages && Math.abs(page - currentPage) <= 1"
          class="pagination-number" 
          :class="{ 'active': currentPage === page }"
          @click="changePage(page)"
        >
          {{ page }}
        </span>
      </template>
      
      <!-- 省略号（如果需要） -->
      <span v-if="currentPage < totalPages - 2" class="pagination-dots">...</span>
      
      <!-- 最后一页始终显示 -->
      <span 
        v-if="totalPages > 1"
        class="pagination-number" 
        :class="{ 'active': currentPage === totalPages }"
        @click="changePage(totalPages)"
      >
        {{ totalPages }}
      </span>
    </div>
    
    <button 
      class="pagination-btn pagination-next" 
      @click="changePage(currentPage + 1)"
      :disabled="currentPage === totalPages"
    >
      Next
    </button>
  </div>
</template>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.pagination-btn {
  padding: 8px 15px;
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #f0f0f0;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-numbers {
  display: flex;
  align-items: center;
  margin: 0 15px;
}

.pagination-number {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination-number:hover {
  background-color: #f0f0f0;
}

.pagination-number.active {
  background-color: #00c389;
  color: white;
  cursor: default;
}

.pagination-dots {
  margin: 0 5px;
}
</style> 